<template>
    <div v-if="applicationInfo">
        <!-- 弹出层 -->
        <el-drawer :visible.sync="drawer" direction="btt" :append-to-body="true" :modal-append-to-body="false"
            :with-header="false" size="100%">
            <div style="padding: 20px;">
                <!-- 页头 -->
                <el-page-header @back="goBack" content="申请表详情">
                </el-page-header>
                <h2>申请理由：{{ applicationInfo.reason | filterReason }}</h2>
                <!-- 功能按钮 -->
                <el-row :gutter="10" class="mb8" style="margin: 20px 0; ">
                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="el-icon-plus" :disabled="disabledAddApprover" size="mini"
                            @click="handleAddApp" v-hasPermi="['system:application:add']">新增</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="danger" plain icon="el-icon-delete" size="mini"
                            :disabled="applicationInfo.approvalList.length ? false : true" @click="deleteReview"
                            v-hasPermi="['system:application:remove']">清空</el-button>
                    </el-col>
                </el-row>
                <!-- 表单 -->
                <el-table :loading="appLoading" :data="applicationInfo.approvalList"
                    @selection-change="handleSelectionChange">
                    <!-- <el-table-column type="selection" width="55" align="center" /> -->
                    <el-table-column prop="approverName" align="center" label="审核人" />
                    <el-table-column prop="status" align="center" label="审核情况">
                        <template slot-scope="scope">
                            {{ scope.row.status | filterStatus }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="phonenumber" align="center" label="审核人联系方式tel" />
                    <el-table-column prop="approverTime" align="center" label="审核起始时间" />
                    <el-table-column prop="createTime" align="center" label="审核通过时间" />
                    <el-table-column prop="comment" align="center" label="备注" />
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEditApp"
                                v-hasPermi="['system:application:edit']">修改</el-button>
                            <!-- <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteReview(scope.row)"
                                v-hasPermi="['system:application:remove']">删除</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-drawer>

        <!-- 添加审核人 -->
        <el-dialog :visible.sync="openAddApp" :title="title" width="500px">
            <el-form ref="applicationForm" :model="approverForm" label-width="80px" :rules="approverRules"
                label-position="top">

                <el-form-item label="申请表" prop="applicationIds">
                    <el-select style="width: 100%;" v-model="approverForm.applicationIds" multiple placeholder="请选择申请表">
                        <el-option v-for="item in applicationList" :key="item.id" :label="item.stuName" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="审核人" prop="approverIds">
                    <el-select style="width: 100%;" v-model="approverForm.approverIds" :loading="selectLoading" multiple
                        :filterable="true" :remote="true" :default-first-option="true" :remote-method="remoteFn"
                        placeholder="请输入审核人姓名搜索选择">
                        <el-option v-for="item in approverList" :key="item.userId" :label="item.nickName"
                            :value="item.userId">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitApproverForm">确 定</el-button>
                <el-button @click="appriverCancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { remoteApprover } from "@/api/dormitory/application";
import { createReview, delReview, reviewProcess } from "@/api/dormitory/accommodation-management/review";

export default {
    name: 'SRSUiIndex',
    props: ["type"],
    data() {
        return {
            // 加载
            appLoading: true,
            // 是否弹出层
            openAddApp: false,
            // 抽屉是否显示
            drawer: false,
            // 申请表详细信息
            applicationInfo: null,
            // 非多个禁用
            multiple: true,
            // 弹出层标题
            title: "",
            // 添加审核人表单
            approverForm: {
                // 审核人id列表
                approverIds: [],
                // 申请表id列表
                applicationIds: [],
                // 申请表类型  1退宿申请 2调宿申请 3延迟退宿申请 4假期留宿申请表 5外宿申请表 6外来人员住宿申请表
                type: null
            },
            // 添加审核人表单验证规则
            approverRules: {
                applicationIds: [
                    { required: true, message: "需要添加审核人的申请不能为空", trigger: "blur" }
                ],
                approverIds: [
                    { required: true, message: "审核人不能为空", trigger: "blur" }
                ]
            },
            // 申请表列表
            applicationList: [],
            // 远程搜索加载
            selectLoading: false,
            // 审核人员列表
            approverList: [],
            // 删除审核人列表
            approverList: [],
            // 禁用新增审核人
            disabledAddApprover: false,
            // ids列表
            ids: [],
            approverNameList: []
        };
    },

    mounted() {
        // 获取申请表详细信息
        this.$bus.$on("sendApplicationInfo", this.getApplicationInfo)
    },

    methods: {
        // 获取申请表详情
        getApplication() {
            let timer = setTimeout(() => {
                this.appLoading = true
            }, 500)
            this.appLoading = false
            clearTimeout(timer)
            this.$emit("resetData", this.applicationInfo.id)
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.approverNameList = selection.map(item => item.approverName)
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        //关闭弹出层
        goBack() {
            this.drawer = false
        },
        // 打开弹出层
        getApplicationInfo(value, boolean, applicationList) {
            this.approverForm = {
                approverIds: [],
                applicationIds: [],
                type: this.type
            }
            this.applicationInfo = value
            !value.approvalList.length ? this.disabledAddApprover = false : this.disabledAddApprover = true
            this.drawer = boolean
            this.applicationList = applicationList
            this.approverForm.applicationIds.push(value.id)
            this.getApproverIds(value.approvalList)
        },
        // 获取到审核人列表的所有id
        getApproverIds(list) {
            list.forEach(e => {
                this.ids.push(e.id)
                this.approverNameList.push(e.approverName)
            })
        },
        // 删除审核人
        deleteReview(row) {
            this.$modal.confirm(`是否删除审核人为"${this.approverNameList}"的数据项`).then(() => {
                return delReview(ids)
            }).then(() => {
                this.$modal.msgSuccess("删除成功");
                this.getApplication()
            })
        },
        // 远程搜索方法
        remoteFn(value) {
            if (!value || !this.openAddApp) return
            this.selectLoading = true
            remoteApprover({ nickName: value }).then(res => {
                this.approverList = res.rows
                this.selectLoading = false
            })
        },
        // 表单确认
        submitApproverForm() {
            this.$refs["applicationForm"].validate(valid => {
                if (valid) {
                    createReview(this.approverForm).then(res => {
                        this.$modal.msgSuccess("添加成功");
                        this.getApplication()
                        this.appLoading = true
                        this.openAddApp = false
                    })
                }
            })
        },
        // 新增
        handleAddApp() {
            this.title = "为审核表添加审核人"
            this.openAddApp = true
            this.selectDisabled = false
            this.approverForm.approverIds = []
        },
        // 修改审核人员
        handleEditApp() {
            this.title = "修改审核内容"
            this.openAddApp = true
            this.selectDisabled = true
            this.applicationInfo.approvalList.forEach(element => {
                this.approverForm.approverIds.push(element.approverName)
            });
        },
        // 表单取消
        appriverCancel() {
            this.openAddApp = false
        }
    },
    filters: {
        filterStatus(value) {
            if (!value) {
                return "审核中"
            }
            return "审核完成"
        },
        filterReason(value) {
            if (!value) return "暂无"
            return value
        }
    },
    watch: {
        openAddApp(newValue) {
            if (newValue) return
            this.approverForm.approverIds = []
        }
    }
};
</script>

<style lang="scss" scoped></style>